<template>
  <div class="login-container">
  <!-- 左边栏 -->
    <div style="grid-column: span 3;">
    <div class="left-container">
      <div class="animate__animated">
        <h2 class="left-container-title">语音辅助后台管理系统</h2>
        <p class="left-container-introduce">一款由 Spring Boot3 + Mybaits + Vue 3.0 + Vite 4 开发的前后端分离系统</p>
        <img src="@/assets/images/login-logo.png" alt="logo" class="left-container-image">
      </div>
    </div>
    </div>


  <!-- 右边栏 -->
    <div class="right-container">
      <h2 class="right-container-welcome">欢迎回来</h2>
      <div class="right-container-mention">
            <span style=" height: 1px;width: 4rem;background-color: #E2E8F0; "></span>
            <span>账号密码登录</span>
            <span style=" height: 1px;width: 4rem;background-color: #E2E8F0; "></span>
      </div>
      <el-form :model="user" :rules="rules" ref="userForm" class="elForm">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="user.username"
            placeholder="请输入用户名"
            size="large"
            clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="user.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
            size="large"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            round
            class="elButtonR"
            type="warning"
            size="large"
            aria-autocomplete="off"
            @click="$router.push('/register')"
          >
            注册
          </el-button>
          <el-button
            round
            type="primary"
            @click="loginHome"
            :loading="loading"
            class="elButtonL"
            size="large"
          >
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <el-alert
        v-if="errorMessage"
        :title="errorMessage"
        type="error"
        show-icon
        class="error-message"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { login } from '@/api/login';
import { useStore } from 'vuex'; 

const router = useRouter();
const store = useStore(); // 新增：获取 Store 实例


// 表单数据
const user = ref({
  username: '',
  password: '',
});

// 表单验证规则x
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
};

// 错误消息
const errorMessage = ref('');
const loading = ref(false); // 加载状态

// 登录逻辑
const loginHome = async () => {
  try {
    loading.value = true;
    errorMessage.value = '';

    const requestData = {
      username: user.value.username,
      password: user.value.password,
    };

    const response = await login(requestData);

    if (response.data.code == 200) {
      // 新增：提交用户信息到 Vuex
      
      store.commit('user/SET_USER_INFO', response.data.msg); 
      console.log(store.state.user.userInfo)
      
      ElMessage.success('登录成功！');
      router.push('/home');
    } else {
      errorMessage.value = response.data.message || '登录失败';
    }
  } catch (error) {
    errorMessage.value = '请求失败，请检查网络或稍后重试';
    console.error('登录失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  display: grid;
  grid-template-columns:  repeat(6, minmax(0, 1fr));
  height: 100vh;
  background-color: white;
}

.left-container {
  height: 100%;
  background: #001428;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.animate__animated{
  animation-name: bounceInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}

.left-container-title{
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 1.75rem;
  color:white;
  text-align: center;
}

.left-container-introduce{
  color:white;
}

.left-container-image{
  height:450px;
}

.right-container {
  grid-column: span 3 ;
  padding-left:0.75rem;
  padding-right:0.75rem;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* 根据具体动画库的类名添加动画效果 */
  animation-name: bounceInRight;
  animation-duration: 0.3s;
}

.right-container-welcome{
  font-weight:bold;
  font-size:1.875rem;
  color:#374151;
  margin-top:1.25rem;

}

.right-container-mention{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem; 
  color: #CBD5E0;
  margin-right: 0.5rem;
}

.error-message {
  margin-top: 20px;
}

.elButtonR{
  width:130px;
  margin-top:1rem;
  margin-right:3opx;
}

.elButtonL{
  width:130px;
  margin-top:1rem;
}
</style>